
.fancy_slider {
    display:block;
    --full-height: 20px;
    --full-width: 100%;
    height: var(--full-height);
    width: var(--full-width);
    border:0;
    padding:0;
    margin:0;
    position: relative;
}

.fs_label {
    position: absolute;
    height: calc(var(--full-height) -4);
    top: 3px;
    width: var(--full-width);
    background: rgba(255, 255, 255, 0);
    text-align: left;
    padding-left: 4px;
    pointer-events: none;
    font-size: 70%;
    color: #c5c5c5;
}

.fs_graphic {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--full-height);
    width: var(--full-width);
    background: rgb(34 34 34);
    pointer-events: none;
}

.fs_graphic_fill {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--full-height);
    /*width set dynamically*/
    background: #657886;
    pointer-events: none;
}

.fs_graphic_text {
    position: absolute;
    height: calc(var(--full-height) -4);
    top: 3px;
    width: var(--full-width);
    background: rgba(255, 255, 255, 0);
    text-align: right;
    padding-right: 4px;
    font-size: 75%;
    pointer-events: none;
}

.fs_text_edit {
    position: absolute;
    height: var(--full-height);
    width: var(--full-width);
    background: black;    
    text-align: right;
}

.can_drag {
    cursor:ew-resize;
}

.option_setting {
    display: flex;
    flex-direction: column;
    position: absolute;
    background: black;
    border: thin solid white;
    border-radius: 8px;
    font-size: 75%;
    padding: 6px;
    z-index: 1000;
}

.option_setting_title {
    text-align: center;
    width: 100%;
}

.option_setting_panel {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 4px 0px 4px 0px;
    justify-content: center;
}

.option_setting_input {
    width: 50px;
    font-size: 90%;
    background-color: #00ff0080;
}
.option_setting_input.min {
    text-align:right;
}
.option_setting_input.max {
    text-align:left;
}


.option_setting_dash {
    padding:0px 4px 0px 4px;
}

.option_setting_buttons {
    padding-top: 8px;
    display: flex;
    justify-content: space-evenly;
}

.option_setting_button {
    font-size: 90%;
    width: 50px;
    background-color: #0072ff;
    border-style: none;
}

.bad_value {
    background: #ff000080;
}

.danger_value {
    background: #ff800080;
}
